代码改变世界

HTML5新功能之八 《web works多线程》

2014-06-20 17:45  臭小子1983  阅读(2408)  评论(0)  编辑  收藏  举报

一、多线程

　　js是单线程的去跑代码，比如如果做一个循环从0到1亿相加然后输出，浏览器可能会最后到假死（无响应状态），也可以非常慢，

　　在FF下测试使用了：3986ms　　如果使用web worker来处理，只需要1ms

 

 1 <div id="box"></div>
 2 <input type="button" id="beginBtn" value="开始">
 3 <input type="button" id="endBtn" value="停止">
 4 
 5 <script>
 6     function getId(id){
 7         return document.getElementById(id);
 8     }
 9 
10     var oBeginBtn = getId("beginBtn");
11     var oEndBtn = getId("endBtn");
12     var oBox = getId("box");
13     var temp = 0;
14 
15     var worker = new Worker("count.js");
16 
17     // 接收从线程中传出的计算结果
18     /*
19     worker.onmessage = function(event){
20         // 消息文本放置在data属性中，
21         oBox.innerHTML = event.data;
22     }
23     */
24 
25     oBeginBtn.onclick = function(){
26         console.time('a');
27 
28         // 将数据传给线程
29         worker.postMessage(100000000);
30 
31         worker.onmessage = function(event){
32             // 消息文本放置在data属性中，
33             oBox.innerHTML = event.data;
34         }
35 
36         console.timeEnd('a');
37 
38     }
39 </script>

 

count.js

 1 onmessage = function(event){
 2     var num = event.data;
 3     var result = 0;
 4     for(var i=0; i<num; i++){
 5         result += i;
 6     }
 7 
 8     // 向线程创建源送回消息
 9     postMessage(result);
10 }

 

1、postMessage(msg)：向创建线程的源窗口发消息

2、onmessage：获取接收消息的事件

3、importScripts()：导入其它js脚本，参数为脚本文件的url，可以导入多个脚本文件

4、close()：结束线程

4、navigator对象：

　　可以在localStorage和sessionStorage

　　XMLHttpRequest可以在线程中使用ajax

　　setTimeout、setinterval()：定时器可以使用线程